<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <title>麦車网</title>
     <style>
        * {
            margin: 0;
            padding: 0;
        }
 
        #div_con {
            position: relative;
            width: 1000px;
            height: 150px;
            margin: -200px;
            border: 0px solid #eee;
            overflow: hidden;
            left:460px;
            top: -460px;
        }
 
        #div_msg {
            position: absolute;
 
            width: 1000px;
            height: auto;
            margin: 0;
            padding: 10px;
 
            border: 0px solid red;
        }
 
    </style>
  </head>
  
  <body>
	<nav class="navbar">
      <div class="container navbar-content">
       
      </div>
    </nav>
    <span style="font-family:Microsoft YaHei;"><div style="background:url(statics/images/photo.jpg) no-repeat;width:1500px;height:1000px"> <a href="guide.jsp">首页</a>
        <a href="#">欣赏的车辆</a>
        <a href="#">看过的车辆</a>
        <a href="#">联系与帮助</a>
                     欢迎您：${userName }
        <a href="login.jsp">注销</a>
        <h1 align="center">麦車网</h1>
        
        
        <h1><div style="position:absolute;z-index:2;left:400px;top:200px"><a href="buyCar.html">买二手车</a></div></h1>
        <h1><div style="position:absolute;z-index:2;left:900px;top:200px"><a href="showSell.jsp">卖二手车</a></div></h1>
        </div></span>  
    <!--灰色边框容器div-->
<div id='div_con'>
 
    <!--消息div-->
    <div id='div_msg'>
 
    </div>
</div>
 
 
<script src="//cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
<script>
    var msg1 = '<h2>${newslist[0].title}</h2>' +
        '${newslist[0].content}<br/><br/> ';
 
    var msg2 = '<h2>${newslist[1].title} </h2> ' +
        '${newslist[1].content}<br/><br/> ';
 	
 	var msg3 = '<h2>${newslist[2].title} </h2> ' +
 		'${newslist[2].content}<br/><br/> ';
 	
    var msg = msg1 + msg2 + msg3;
 
    //先赋值div
    $('#div_msg').html(msg);
    //获取div的高度
    var msg_height = $('#div_msg').height();
 
    //加2次，这样完全移动完的时候不至于出现空白
    $('#div_msg').html(msg + msg);
 
    var con_height = $('#div_con').height();
 
    var sub_height = con_height - msg_height;
    console.log('msg_height=' + msg_height + ', con_height=' + con_height + ",sub_height=" + sub_height);
 
    //当前顶部坐标
    var cur_top = 0;
 
    function scrollme() {
        cur_top--;
 
        //如果整个消息都已经上移完了，则重新赋值消息，及移动距离
        if (0 == cur_top + msg_height) {
            console.log('已经移完了,开始下一次')
            cur_top = 0;
        }
 
        $('#div_msg').css('top', cur_top + 'px');
    }
 
    setInterval("scrollme()", 50);
 
</script>


  </body>
</html>
